<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { getAssetsFile, nameFilter, xmloading, xmtoast } from '@/utils/public';
  import { rewardList, eventRewards, useUserStore, activeStatus } from '@/pinia/getter';
  import request from '@/api/index'; 
  import { useRouter } from 'vue-router'
  const $router = useRouter()
  const action = reactive({
    tabKey:0,
    topTips:'',
    dayKey:0,
    ruleImg:'',
    rewardTips:'',
    userlist:[] as Array<any>
  }),
  myinfo = reactive({
    num:0,
    image:'',
    name:'',
    score:'',
    needsocre:0,
  });
  
  const tabArr = [
    {key:1,image:'tabBut1.png',notImg:'tabBut2.png',tips:'根据森林狩猎猜中局数排名'},
    {key:2,image:'tabBut3.png',notImg:'tabBut4.png',tips:'根据森林狩猎每个动物的猜中局数领取对应铭牌'},
  ]
  const dayTabArr = [
    {key:1,label:'日榜', ruleImg:'ruleImg1.png',rewardTips:'每日'},
    {key:2,label:'周榜', ruleImg:'ruleImg2.png',rewardTips:'每周一'},
  ]
  const tabClick = (item:any)=>{
    const { key=0, tips='' } = item
    action.tabKey = key
    action.topTips = tips
    if(key == 1) dayTabClick(dayTabArr[0])
    if(key == 2) useUserStore.getActInfo()
  }
  const dayTabClick = (item:any)=>{
    const { key=0, rewardTips='', ruleImg='' } = item
    action.ruleImg = ruleImg
    action.dayKey = key
    action.rewardTips = rewardTips
    action.userlist = []
    getRankList()
  }
  const getRankList = async()=>{
    const loading = xmloading()
    const res = await request.getcolor_pool({rank_type:action.dayKey})
    loading.close()
    const { data_list=[], user_info={} } = res?.data || {}
    Object.assign(myinfo,user_info)
    action.userlist = data_list
  }
  const getReward = async(item:any, item_type:number,tips:string='领取成功，已发放您的背包')=>{
    const { poolId=0, status } = item
    if(!status) return
    if(status == 1) return
    const loading = xmloading('领取中')
    await request.gameInfo({item_type, poolId})
    loading.close()
    xmtoast(tips)
    const setTime = setTimeout(() => {
      useUserStore.getActInfo()
      clearTimeout(setTime)
    }, 1000);
  }
  onMounted(()=>{
    tabClick(tabArr[0])
  })
</script>
<template>
  <div class="content">
    <div class="banner">
      <xmimg @click="$router.push({path:'/ruletext'})" src="ruleBut.png" class="ruleBut" />
      <div class="time">第一期：2024.8.2-2024.8.16</div>
    </div>
    <div class="rewardInfo flex-align">
      <xmimg src="border1.png" class="borderimg" />
      <ul>
        <li>活动期间在【森林狩猎】中参与游戏后</li>
        <li class="mt2">即可领取头像框 <span>森友会*1天</span></li>
      </ul>
      <xmimg
        @click="getReward({status:eventRewards},1,'领取成功')"
        :src="['notGetBut3.png','notGetBut4.png','getBut1.png'][eventRewards]"
        class="getBut"
      />
    </div>
    <div class="listPadding">
      <div class="tabbox flex-align-center">
        <div
          class="but"
          v-for="item in tabArr"
          @click="tabClick(item)"
          :style="{backgroundImage:`url(${getAssetsFile(item.key == action.tabKey ? item.image : item.notImg)})`}">
        </div>
      </div>
      <div class="listBack">
        <div class="topTips">{{ action.topTips }}</div>
        <template v-if="action.tabKey == 1">
          <div class="dayTabs flex-align">
            <div
              :class="['but',item.key == action.dayKey?'selectBut':'']"
              v-for="item in dayTabArr"
              @click="dayTabClick(item)">{{ item.label }}</div>
          </div>
          <div class="rankingList">
            <div class="titleTips">
              榜单奖励<span>（{{ action.rewardTips }}0点自动发放背包）</span>
            </div>
            <xmimg :src="action.ruleImg" class="ruleImg" />
            <div class="titleTips">
              排行榜<span>（{{ action.rewardTips }}0点更新榜单）</span>
            </div>
            <div class="slide">
              <div v-for="item in action.userlist" class="userinfo flex-align">
                <div :class="['rankingNum',`rankingNum${item.num}`]">{{ item.num > 3 ? item.num : '' }}</div>
                <img :src="item.image" class="portrait" >
                <div class="nickName">{{ nameFilter(item.name,10) }}</div>
                <div class="round">{{ item.score }}局</div>
              </div>
              <div v-if="action.userlist.length == 0" class="noDataYet">暂无数据</div>
            </div>
          </div>
          <div class="myInfo">
            <div class="userinfo flex-align">
              <div :class="['rankingNum',`rankingNum${myinfo.num}`]">{{ myinfo.num > 0 ? myinfo.num > 3 ? myinfo.num : '' : '未上榜' }}</div>
              <img :src="myinfo.image" class="portrait" >
              <div class="nickName">{{ nameFilter(myinfo.name) }}</div>
              <dl class="round">
                <dt>{{ myinfo.score }}局</dt>
                <dd v-if="myinfo.needsocre">距上一名差 {{myinfo.needsocre}} 局</dd>
              </dl>
            </div>
          </div>
        </template>
        <template v-if="action.tabKey == 2">
          <div v-for="item in rewardList" class="rewardList flex-align">
            <img :src="getAssetsFile(`role${item.poolId}.png`)" class="role">
            <dl>
              <dt>在【森林狩猎】猜中{{ item.needNum }}局{{ item.name }}</dt>
              <dd class="flex-align">
                <img :src="getAssetsFile(`roleName${item.poolId}.png`)" class="roleName">
                <span>铭牌×30天</span>
              </dd>
            </dl>
            <div class="rightBox">
              <img
                :src="getAssetsFile(['notGetBut2.png','notGetBut1.png','getBut2.png'][item.status])"
                class="butimg"
                @click="getReward(item,4)"
              >
              <div>({{ item.nowNum }}/{{ item.needNum }})</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .content {
    width: 100vw;
    min-height: 100vh;
    background: #002C0D;
    .banner {
      width: 100%;
      height: 191px;
      padding: 49px 0 0;
      box-sizing: border-box;
      background: url('@/assets/images/banner.png') left top / 100% 100% no-repeat;
      .time {
        width: 100%;
        margin: 30px 0 0;
        text-align: center;
        line-height: 20px;
        color: #D4FF90;
        font-size: 14px;
        font-weight: 500;
      }
      .ruleBut {
        width: 21px;
        height: 60px;
        margin: 0 0 0 auto;
      }
    }
    .rewardInfo {
      padding: 4px 16px 4px 8px;
      box-sizing: border-box;
      background: #000;
      .borderimg {
        width: 62px;
        height: 62px;
        margin-right: 4px;
      }
      ul {
        li {
          font-weight: 400;
          font-size: 11px;
          color: #fff;
          line-height: 16px;
          span {
            color: #FFED55;
          }
        }
        .mt2 {
          margin-top: 2px;
        }
      }
      .getBut {
        width: 64px;
        height: 30px;
        margin: 0 0 0 auto;
      }
    }
    .listPadding {
      padding: 16px;
      .tabbox {
        margin-bottom: 12px;
        .but {
          width: 167px;
          height: 44px;
          background: left top / 100% 100% no-repeat;
          transition: background .38s;
        }
        .but:nth-child(1) {
          margin-right: 9px;
        }
      }
      .listBack {
        width: 100%;
        padding: 4px 0 0;
        box-sizing: border-box;
        background: #fff;
        border-radius: 12px;
        .topTips {
          height: 24px;
          line-height: 24px;
          font-weight: 400;
          font-size: 12px;
          color: #026447;
          text-align: center;
          margin: 0 4px;
          background: rgba($color: #026447, $alpha: .1);
          border-radius: 8px;
        }
        .dayTabs {
          width: 229px;
          height: 38px;
          margin: 8px auto 0;
          padding: 3px;
          box-sizing: border-box;
          background: url('@/assets/images/backborder.png') left top / 100% 100% no-repeat;
          .but {
            width: 112px;
            height: 32px;
            line-height: 32px;
            color: #026447;
            font-weight: 500;
            font-size: 14px;
            text-align: center;
            transition: color .28s;
          }
          .selectBut {
            color: #fff;
            background: url('@/assets/images/butColor.png') left top / 100% 100% no-repeat;
          }
        }
        .rankingList {
          padding: 0 14px;
          box-sizing: border-box;
          .pl-2 {
            padding-left: 2px;
          }
          .titleTips {
            color: #026447;
            font-weight: 500;
            font-size: 14px;
            line-height: 14px;
            padding-left: 2px;
            margin: 20px 0 10px;
            span {
              font-size: 12px;
              font-weight: 400;
              line-height: 12px;
            }
          }
          .ruleImg {
            width: 100%;
            height: auto;
          }
        }
        .slide {
          overflow-x: hidden;
          overflow-y: auto;
          height: 350px;
        }
        .slide::-webkit-scrollbar {
          display: none;
        }
        .userinfo {
          width: 100%;
          height: 56px;
          .rankingNum {
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #111;
            font-weight: 500;
            font-size: 14px;
            background: left top / 24px 24px no-repeat;
          }
          .rankingNum1 {
            background-image: url('@/assets/images/ranking1.png');
          }
          .rankingNum2 {
            background-image: url('@/assets/images/ranking2.png');
          }
          .rankingNum3 {
            background-image: url('@/assets/images/ranking3.png');
          }
          .portrait {
            overflow: hidden;
            width: 36px;
            height: 36px;
            margin: 0 16px 0 9px;
            border-radius: 100%;
          }
          .nickName {
            color: #111;
            font-weight: 500;
            font-size: 14px;
          }
          .round {
            color: #111;
            font-weight: 500;
            font-size: 14px;
            margin: 0 0 0 auto;
            text-align: right;
          }
        }
        .noDataYet {
          text-align: center;
          line-height: 200px;
        }
        .myInfo {
          width: 100%;
          height: 68px;
          padding: 0 20px 0 14px;
          box-sizing: border-box;
          background: #026447;
          border-radius: 12px;
          border: 2px solid #fff;
          box-sizing: border-box;
          .userinfo {
            height: 100%;
            .rankingNum {
              min-width: max-content;
            }
            .rankingNum, .nickName, .round {
              color: #fff;
            }
            .round {
              dt {
                line-height: 20px;
              }
              dd {
                color: rgba($color: #fff, $alpha: .5);
                font-weight: 400;
                font-size: 12px;
                line-height: 17px;
              }
            }
          }
        }
        .rewardList {
          height: 80px;
          padding: 0 16px 0 10px;
          box-sizing: border-box;
          .role {
            width: 52px;
            height: 52px;
            margin-right: 10px;
          }
          dl {
            dt {
              color: #111;
              font-weight: 500;
              font-size: 12px;
            }
            dd {
              margin-top: 6px;
              img {
                width: auto;
                height: 18px;
                margin-right: 6px;
              }
              span {
                color: #111;
                font-weight: 500;
                font-size: 12px;
              }
            }
          }
          .rightBox {
            margin: 0 0 0 auto;
            .butimg {
              width: 56px;
              height: 28px;
            }
            div {
              color: #111;
              font-weight: 500;
              font-size: 12px;
              text-align: center;
              margin-top: 6px;
            }
          }
        }
      }
    }
  }
</style>